<style lang="less">
    .ivu-modal-footer {
	    padding: 0px;
	}
</style>

<template>
	<div>
		<Form ref="form" :rules="formValidate" :model="permission" :label-width="100" label-position="left" >
			
			<div v-if="permissionProp.flag == 'firstMenu'" >
				<h3>主菜单路由</h3>
				<div style="margin-left: 40px;">
			        <Row type="flex" justify="center" :gutter="24">
				        <Col span="12">
				            <Form-item label="一级菜单名称:" prop="title" >
				          		<Input v-model="permission.title" placeholder="请输入" :maxlength="30"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="12" >
					        <Form-item label="一级菜单编码:" prop="code" >
					            <Input v-model="permission.code" placeholder="请输入" :maxlength="50"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				    <Row type="flex" justify="center" :gutter="24">
				        <Col span="12" >
					        <Form-item label="菜单icon:" >
					            <Input v-model="permission.icon" placeholder="请输入" :maxlength="20"></Input>
					        </Form-item>
				        </Col>
				        <Col span="12">
				            <Form-item label="路由name:" prop="name" >
				          		<Input v-model="permission.name" placeholder="请输入"  :maxlength="30"></Input>
				        	</Form-item> 
				        </Col>
				    </Row>
				    <Row type="flex" justify="center" :gutter="24">
				        <Col span="12">
				            <Form-item label="路由path:" prop="path" >
					            <Input v-model="permission.path" placeholder="请输入" :maxlength="50"></Input>
					        </Form-item>
				        </Col>
				        <Col span="12" >
					        
				        </Col>
				    </Row>
			    </div>
			    
			    <hr />
			</div>
			
			<div v-if="permissionProp.flag == 'secondMenu' || permissionProp.flag == 'firstMenu'">
				<h3>二级菜单路由</h3>
				<div style="margin-left: 40px;">
			        <Row type="flex" justify="center" :gutter="24">
				        <Col span="12">
				            <Form-item label="二级菜单名称:" :prop="'child.title'" :rules="{required: true, message: '二级菜单名称不能为空', trigger: 'blur'}" >
				          		<Input v-model="permission.child.title" placeholder="请输入"  :maxlength="30"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="12" >
					        <Form-item label="二级菜单编码:" :prop="'child.code'" :rules="{required: true, message: '二级菜单编码不能为空', trigger: 'blur'}" >
					            <Input v-model="permission.child.code" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				    
				    <Row type="flex" justify="center" :gutter="24">
				    	<Col span="12" >
					        <Form-item label="菜单icon:" >
					            <Input v-model="permission.child.icon" placeholder="请输入" :maxlength="20"></Input>
					        </Form-item>
				        </Col>
				        <Col span="12">
				            <Form-item label="路由name:" >
				          		<Input v-model="permission.child.name" placeholder="请输入"  :maxlength="50"></Input>
				        	</Form-item> 
				        </Col>
				    </Row>
				    
				    <Row type="flex" justify="center" :gutter="24">
				        <Col span="12">
				            <Form-item label="路由component:" >
				          		<Input v-model="permission.child.component" placeholder="请输入"  :maxlength="100"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="12" >
					        <Form-item label="路由path:" >
					            <Input v-model="permission.child.path" placeholder="请输入" :maxlength="50"></Input>
					        </Form-item>
				        </Col>
				    </Row>
			    </div>
			</div>
			
			<div v-if="permissionProp.flag == 'fun'">
				<h3>功能</h3>
				<div style="margin-left: 40px;">
			        <Row type="flex" justify="center" :gutter="24">
				        <Col span="12">
				            <Form-item label="功能名称:" :prop="'child.title'" :rules="{required: true, message: '功能名称不能为空', trigger: 'blur'}" >
				          		<Input v-model="permission.child.title" placeholder="请输入"  :maxlength="12"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="12" >
					        <Form-item label="功能编码:" :prop="'child.code'" :rules="{required: true, message: '功能编码不能为空', trigger: 'blur'}" >
					            <Input v-model="permission.child.code" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				</div>   
			</div>
		    
	    </Form>
	    
    	<ButtonGroup style="margin-left: 524px;">
	        <Button @click="addPermission('form')" type="primary">添加</Button>
	        <Button @click="closeModal()">关闭</Button>
	    </ButtonGroup>
	</div>
</template>

<script> 
export default {
   	props: ["permissionProp"],
   	components: {},
    data () {
        return {
			permission: {
				path: "/",
				child: {},
			},
			formValidate: {
				title: [{
					required: true,
					message: '一级菜单名称不能为空',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '一级菜单编码不能为空',
					trigger: 'blur'
				}],
				name: [{
					required: true,
					message: '路由name不能为空',
					trigger: 'blur'
				}],
				path: [{
					required: true,
					message: '路由path不能为空',
					trigger: 'blur'
				}]
			}
        };
    },
    created(){
    	if(this.permissionProp.flag == 'firstMenu'){//一级菜单，设置主菜单pid
    		this.permission.pid = this.permissionProp.id;
    	}else {//二级菜单或菜单功能
    		this.permission.id = this.permissionProp.id;
    	}
	},
    methods: {
    	addPermission(name) {
			this.$refs[name].validate((valid) => {
				if(valid) {
					this.$axios.post(
						'/api/Permission/addPermission', 
						JSON.stringify(this.permission), 
						{headers: {'Content-Type': 'application/json;charset=UTF-8'},type: 'json'}
					).then(res => {
						this.$Notice.success({title: '添加成功！'});
						this.closeModal();
						this.$emit("getPermissionList");
					});
				} else {
					this.$Message.warning('表单验证失败!');
				};
			});
		},
    	closeModal(){
	        this.$emit('closeModal');
	    }
    }
};
</script>